<template>
  <div :class="{'avue--collapse':isCollapse}" class="avue-contail">
    <div class="avue-header">
      <!-- 顶部导航栏 -->
      <!-- <top ref="top" /> -->
      <div class="header-top">
        <i class="top-logo" />
        <div class="top-right">
          <div class="top-item">
            <i class="user-icon" />
            {{ userInfo.userName }}
          </div>
          <i class="logout-icon" @click="logout" />
        </div>
      </div>
    </div>
    <div class="avue-layout">
      <div class="avue-left">
        <!-- 左侧导航栏 -->
        <sidebar />
      </div>
      <div class="avue-main">
        <!-- 顶部标签卡 -->
        <!-- <tags /> -->
        <!-- <transition name="fade-scale">
          <search v-show="isSearch" class="avue-view" />
        </transition> -->
        <!-- 主体视图层 -->
        <div v-show="!isSearch" id="avue-view" style="height:100%;overflow-y:auto;overflow-x:hidden;">
          <keep-alive :include="keepPages" :max="5">
            <router-view />
          </keep-alive>
          <!-- <router-view v-if="!$route.meta.$keepAlive" class="avue-view" /> -->
        </div>
      </div>
    </div>
    <div class="avue-shade" @click="showCollapse" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import tags from './tags'
// import search from './search'
// import top from './top/'
import sidebar from './sidebar/'
import admin from '@/util/admin'
import { validatenull } from '@/util/validate'
import { calcDate } from '@/util/date.js'
import { getStore } from '@/util/store.js'

export default {
  name: 'Index',
  components: {
    sidebar
  },
  provide() {
    return {
      index: this
    }
  },
  data() {
    return {
      // 搜索控制
      isSearch: false,
      // 刷新token锁
      refreshLock: false,
      // 刷新token的时间
      refreshTime: ''
    }
  },
  computed: mapGetters(['isMenu', 'isLock', 'isCollapse', 'website', 'menu', 'keepPages', 'userInfo']),
  created() {
    // 实时检测刷新token
    // this.refreshToken()
  },
  mounted() {
    // this.init()
  },
  methods: {
    showCollapse() {
      this.$store.commit('SET_COLLAPSE')
    },
    // 初始化
    init() {
      this.$store.commit('SET_SCREEN', admin.getScreen())
      window.onresize = () => {
        setTimeout(() => {
          this.$store.commit('SET_SCREEN', admin.getScreen())
        }, 0)
      }
      this.$store.dispatch('FlowRoutes').then(() => {
      })
    },
    // 打开菜单
    openMenu(item = {}) {
      this.$store.dispatch('GetMenu', item.id).then(data => {
        if (data.length !== 0) {
          this.$router.$avueRouter.formatRoutes(data, true)
        }
        // 当点击顶部菜单后默认打开第一个菜单
        /* if (!this.validatenull(item)) {
            let itemActive = {},
              childItemActive = 0;
            if (item.path) {
              itemActive = item;
            } else {
              if (this.menu[childItemActive].length === 0) {
                itemActive = this.menu[childItemActive];
              } else {
                itemActive = this.menu[childItemActive].children[childItemActive];
              }
            }
            this.$store.commit('SET_MENU_ID', item);
            this.$router.push({
              path: this.$router.$avueRouter.getPath({
                name: (itemActive.label || itemActive.name),
                src: itemActive.path
              }, itemActive.meta)
            });
          }*/
      })
    },
    // 定时检测token
    refreshToken() {
      this.refreshTime = setInterval(() => {
        const token = getStore({
          name: 'token',
          debug: true
        }) || {}
        const date = calcDate(token.datetime, new Date().getTime())
        if (validatenull(date)) return
        if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
          this.refreshLock = true
          this.$store
            .dispatch('refreshToken')
            .then(() => {
              this.refreshLock = false
              // 待完成问卷调查页和自定义表单页内数据更新
            })
            .catch(() => {
              this.refreshLock = false
            })
        }
      }, 10000)
    },
    logout() {
      this.$confirm('确定退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          this.$router.replace('/login')
          // const callBackUrl = window.location.protocol + '//' + window.location.host + '/back'
          // window.location.replace(process.env.VUE_APP_HOME_LOGIN + '?back=' + callBackUrl || '')
        })
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="scss">
.avue-contail{
  font-size: 14px;
}
.header-top {
  height: 68px;
  background: #0368D1;
  padding: 0 24px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top-logo {
  width: 374px;
  height: 34px;
  background: url('../../assets/images/logo.png');
  background-size: 100% 100%;
  display: inline-block;
}

.top-right{
    display: flex;
    color: #fff;
    align-items: center;
}

.top-item {
    display: flex;
    align-items: center;
}
.top-item  + .top-item {
    margin-left: 24px;
}
.logout-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background: url('../../assets/images/logout.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    position: relative;
    margin-left: 39px;
}
.logout-icon::before {
    content: '';
    width: 1px;
    height: 16px;
    display: inline-block;
    background: rgba(234,235,237,0.30);
    position: absolute;
    left: -15px;
    top: 4px;
    pointer-events: none;
}
.user-icon {
    width: 36px;
    height: 36px;
    display: inline-block;
    background: url('../../assets/images/user-icon.png') no-repeat;
    margin-right: 12px;
}
.my-set-icon {
    width: 16px;
    height: 18px;
    display: inline-block;
    background: url('../../assets/images/my-set-icon.png') no-repeat;
    margin-right: 8px;
}

// .arrow-b-icon {
//     width: 16px;
//     height: 16px;
//     display: inline-block;
//     background: url('../../assets/images/chevron-down.png') no-repeat;
//     margin-left: 8px;
// }
</style>
